<template>
  <view class="template-pay tn-safe-area-inset-bottom">
    <view :style="{height: vuex_custom_bar_height + 'px'}" class="tn-navbg">
      <!-- 顶部自定义导航 -->
      <tn-nav-bar alpha customBack fixed>
        <view slot="back" class='tn-custom-nav-bar__back'
              @click="goBack">
          <text class='icon tn-icon-left'></text>
          <text class='icon tn-icon-home-capsule-fill'></text>
        </view>
      </tn-nav-bar>
    </view>

    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}" class="custom_container">
      <!-- 已结束标题 -->
      <view class="tn-bg-white tn-padding-sm tn-margin-bottom"
            style="font-size: 36rpx;font-weight:bold;border-radius: 12rpx">已结束
      </view>
      
      <!-- 商品标题与价格 -->
      <view class="tn-padding-sm tn-bg-white tn-margin-bottom tn-flex tn-flex-row-between">
        <view class="tn-text-bold">{{ detail.title }}</view>
        <view class="tn-color-gray">¥{{ detail.totalPrice }}</view>
      </view>
      
      <!-- 订单详情 -->
      <view class="tn-bg-white tn-padding-sm">
        <view class="tn-flex tn-flex-row-between tn-margin-bottom">
          <view>订单ID</view>
          <view class="tn-color-gray">{{ detail.orderId }}</view>
        </view>
        <view class="tn-flex tn-flex-row-between tn-margin-bottom">
          <view>总金额</view>
          <view class="tn-color-gray">¥{{ detail.totalPrice }}</view>
        </view>
        <view class="tn-flex tn-flex-row-between tn-margin-bottom">
          <view>定金</view>
          <view class="tn-color-gray">¥{{ detail.advancePrice }}</view>
        </view>
        <view class="tn-flex tn-flex-row-between tn-margin-bottom">
          <view>尾款</view>
          <view class="tn-color-gray">¥{{ detail.originalFinalPaymentPrice }}</view>
        </view>
        <view class="tn-flex tn-flex-row-between tn-margin-bottom">
          <view>团购优惠</view>
          <view class="tn-color-gray">¥{{ detail.discountedPrice || '0' }}</view>
        </view>
        <view class="tn-flex tn-flex-row-between tn-margin-bottom">
          <view>其他优惠</view>
          <view class="tn-color-gray">¥{{ detail.otherDiscount || '0' }}</view>
        </view>
        <view class="tn-flex tn-flex-row-between tn-margin-bottom">
          <view>定金支付时间</view>
          <view class="tn-color-gray">{{ detail.depositPaymentTime }}</view>
        </view>
        <view class="tn-flex tn-flex-row-between tn-margin-bottom">
          <view>尾款支付时间</view>
          <view class="tn-color-gray">{{ detail.balancePaymentTime || '' }}</view>
        </view>
      </view>
      
      <!-- 前往评价按钮 -->
      <view class="review-btn" @click="goToReview">
        前往评价
      </view>
    </view>
  </view>
</template>

<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
import {queryPaperDetail} from "@/api";

export default {
  name: "invited",
  mixins: [template_page_mixin],
  data() {
    return {
      detail: {
        title: '校园二手交易平台',
        totalPrice: '1500',
        advancePrice: '750',
        balancePayment: '700',
        groupDiscount: '-50',
        otherDiscount: '0',
        orderId: '',
        createTime: '',
        depositPaymentTime: '',
        balancePaymentTime: ''
      }
    }
  },
  mounted() {
  },
  onLoad({id}) {
    this.queryOrderDetail(id)
  },
  methods: {
    async queryOrderDetail(id) {
      try {
        const res = await queryPaperDetail(id)
        if (res.code === 200) {
          // 合并默认值与API返回数据
          this.detail = Object.assign({}, this.detail, res.data)
          
          // 如果API返回的数据中没有团购优惠和其他优惠，使用默认值
          if (!this.detail.groupDiscount) this.detail.groupDiscount = '50'
          if (!this.detail.otherDiscount) this.detail.otherDiscount = '0'
        }
      } catch (e) {
        console.log(e)
      }
    },
    goToReview() {
      // 前往评价页面
      uni.navigateTo({
        url: '/minepages/review?orderId=' + this.detail.orderId
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.custom_container {
  padding: 20rpx;
  height: 100vh;
  background-color: #f5f5f5;
}

.tn-margin-bottom {
  margin-bottom: 20rpx;
}

.review-btn {
  position: fixed;
  bottom: 40rpx;
  left: 20rpx;
  right: 20rpx;
  height: 90rpx;
  line-height: 90rpx;
  text-align: center;
  background-color: #4e7df5;
  color: #fff;
  border-radius: 45rpx;
  font-size: 32rpx;
}

.tn-custom-nav-bar__back {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.15);
  border-radius: 1000rpx;
  border: 1rpx solid rgba(255, 255, 255, 0.5);
  color: #FFFFFF;
  font-size: 18px;

  .icon {
    display: block;
    flex: 1;
    margin: auto;
    text-align: center;
  }

  &:before {
    content: " ";
    width: 1rpx;
    height: 110%;
    position: absolute;
    top: 22.5%;
    left: 0;
    right: 0;
    margin: auto;
    transform: scale(0.5);
    transform-origin: 0 0;
    pointer-events: none;
    box-sizing: border-box;
    opacity: 0.7;
    background-color: #FFFFFF;
  }
}

.tn-navbg {
  background: linear-gradient(-120deg, #F15BB5, #9A5CE5, #01BEFF, #00F5D4);
  background-size: 500% 500%;
  animation: gradientBG 15s ease infinite;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
}

@keyframes gradientBG {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
</style>